<template>
  <div style="width: 900px;margin: 25px">
    <div style="display: flex;margin: 20px; justify-content: center;">
      <!--    搜索区域-->
      <el-input v-model="search" placeholder="请输入你要搜索的商品名称"
                style="width: 30%;margin-right: 20px" clearable></el-input>
      <el-button type="primary" icon="el-icon-search" @click="goSearch">搜索</el-button>
    </div>

    <!-- 状态筛选按钮区域 -->
    <div style="display: flex; margin-bottom: 20px;justify-content: center;">
      <el-button
          v-for="(item, index) in stateOptions"
          :key="index"
          :type="currentState === item.value ? 'primary' : ''"
          @click="changeState(item.value)">
        {{ item.label }}
      </el-button>
    </div>

    <!--    表格区域-->
    <el-table
        v-loading="loading"
        :data="tableData"
        stripe border
        :default-sort="{prop: 'createTime', order: 'descending'}">

      <!--      商品预览图-->
      <el-table-column
          label="商品预览" width="130px">
        <template #default="scope">
          <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.orderPicture"
              :preview-src-list="[scope.row.orderPicture]">
          </el-image>
        </template>
      </el-table-column>

      <el-table-column
          prop="orderName"
          label="商品名称">
      </el-table-column>
      <el-table-column
          prop="count"
          label="购买数量">
      </el-table-column>
      <el-table-column label="总价">
        <template #default="scope">
          <h3 style="color: #d71d3f">￥{{ scope.row.payPrice * scope.row.count }}</h3>
        </template>
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间" sortable width="140px">
      </el-table-column>
      <el-table-column
          prop="paymentTime"
          label="支付时间" sortable width="140px">
      </el-table-column>
      <el-table-column label="状态">
        <!--        这里应该是使用template 和default标签把那个整个data数据取出来，然后scope就是整个数据，每一行数据就是scope.row,tableData=scope-->
        <template #default="scope">
          <span v-if="scope.row.state === 1" style="color: green">已支付</span>
          <span v-if="scope.row.state === 2" style="color: orange">未支付</span>
          <span v-if="scope.row.state === 3" style="color: red">已取消</span>
          <span v-if="scope.row.state === 4" style="color: darkred">已发货</span>
          <span v-if="scope.row.state === 5" style="color: black">已完成</span>
        </template>
      </el-table-column>
      <!--      操作栏-->
      <el-table-column fixed="right" label="操作" align="center" width="140px">
        <template #default="scope">
          <el-button :disabled="!(scope.row.state === 1 || scope.row.state === 4)"
                     type="warning" size="mini"
                     @click="refund(scope.row)"
                     >退款
          </el-button>

          <el-popconfirm
              title="确定要删除这个订单吗？"
              @confirm="deleteClick(scope.row.id)"
              icon-color="red"
              style="margin-left: 10px">
            <template #reference>
              <el-button :disabled="scope.row.state !== 3 && scope.row.state !== 5"
                         type="danger" size="mini"
                         style="margin-top:7px;margin-right:10px">删除
              </el-button>
            </template>
          </el-popconfirm>

          <el-button :disabled="scope.row.state !== 4"
                     type="success" size="mini"
                     @click="receipt(scope.row.id)"
                     style="margin-top:7px">确认收货
          </el-button>

        </template>
      </el-table-column>
    </el-table>

    <!--    页码区域和弹出退款框，在Vue2里面是不支持v-model:prop="data"的，所以我们要用v-bind:prop.sync="data"实现双向绑定-->
    <div style="margin: 20px 0">

      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="[5,10,20]"
          :page-size.sync="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalNumber">
      </el-pagination>

      <!--      退款的表单-->
      <el-dialog title="申请退款" :visible.sync="dialogVisible" width="50%">
        <el-form label-width="100px" class="demo-ruleForm">
          <el-form-item label="商品信息">
            <h3>{{ refundForm.orderName }}</h3>
          </el-form-item>
          <el-form-item label="申请类型">
            <el-radio-group v-model="refundForm.refundType">
              <el-radio :disabled="refundForm.state !== 1" label="1">我要退款（还未发货）</el-radio>
              <el-radio :disabled="refundForm.state !== 4"  label="2">我要退货退款</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="申请原因">
            <el-select v-model="refundForm.refundReason" placeholder="请选择退款原因">
              <el-option
                  v-for="item in options"
                  :key="item.label"
                  :label="item.label"
                  :value="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="申请金额">
            <h1 style="color: #d01f40">￥{{ refundForm.payPrice * refundForm.count }} (默认全额退款）</h1>
          </el-form-item>
          <el-form-item label="申请说明">
            <el-input type="textarea"
                      maxlength="170" show-word-limit
                      v-model="refundForm.refundDesc"
                      style="width: 70%;font-size: 15px">
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitRefund()">立即退款</el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "MyOrder",
  created() {
    document.title = "我的订单";
    // 取出当前用户信息
    // 取出session的字符串,为了防止取到空值，||一个空对象
    let str = sessionStorage.getItem("user") || "{}";
    // 赋值
    this.user = JSON.parse(str);
    // 加载数据
    this.loadData();
  },
  data() {
    return {
      stateOptions: [
        { label: '全部', value: 0 },
        { label: '已支付', value: 1 },
        { label: '未支付', value: 2 },
        { label: '已取消', value: 3 },
        { label: '已发货', value: 4 },
        { label: '已完成', value: 5 }
      ],
      currentState: 0,
      // 表示表格正在加载
      loading: true,
      // 取出的用户信息
      user: {},
      // 总数据数
      totalNumber: 400,
      // 当前页码
      currentPage: 1,
      // 一页多少个
      pageSize: 5,
      // 输入框的数据
      search: '',
      // 表格的数据
      tableData: [],
      // 申请退款框
      dialogVisible: false,
      // 退款相关
      refundForm: {},
      options: [{
        value: '选项1',
        label: '七天无理由退换'
      }, {
        value: '选项2',
        label: '与商家协调一致退款'
      }, {
        value: '选项3',
        label: '商品与商品描述不符'
      }, {
        value: '选项4',
        label: '不喜欢，效果不好'
      }, {
        value: '选项5',
        label: '质量问题'
      }, {
        value: '选项6',
        label: '收到商品少件'
      }, {
        value: '选项7',
        label: '商品破损或污渍'
      }, {
        value: '选项8',
        label: '空包裹'
      }, {
        value: '选项9',
        label: '商家发错货'
      }, {
        value: '选项10',
        label: '假冒品牌'
      }, {
        value: '选项11',
        label: '其他原因'
      }],
    }
  },
  methods: {
    // 提交退款
    submitRefund() {
      console.log(this.refundForm, "当前退款的表格");

      // 开始判断表格的信息是否填写完整
      if (this.refundForm.refundType == null || this.refundForm.refundType.length === 0) {
        this.$message.warning("请选择申请类型");
        return;
      } else if (this.refundForm.refundReason == null || this.refundForm.refundReason.length === 0) {
        this.$message.warning("请填写申请原因");
        return;
      } else if (this.refundForm.refundDesc == null || this.refundForm.refundDesc.length === 0) {
        this.$message.warning("请填写申请说明");
        return;
      }

      // 根据 refundType 决定提交的 URL
      let url = '';
      if (this.refundForm.refundType === '1') {
        url = '/pay/refunding'; // 我要退款（还未发货）
      } else if (this.refundForm.refundType === '2') {
        url = '/pay/refunding'; // 我要退货退款
      }

      // 提交前显示成功消息
      this.$message.success("已发送申请");

      // 延迟一段时间后提交请求并刷新页面
      setTimeout(() => {
        request.post(url, this.refundForm)
            .then(response => {
                this.$message.success("申请成功");
                window.location.reload(); // 刷新页面
            }).catch(error => {
          this.$message.error("申请失败：" + error.message);
        })
      }, 1000); // 延迟1000毫秒（1秒）
    },

    // 退款功能
    refund(order) {
      console.log(order, "点击的退款订单");
      // 先清空上个信息
      this.refundForm = {};
      // 再把这个商品的信息传入
      this.refundForm = order;
      // 计算退款金额
      this.refundForm.refundAmount = this.refundForm.payPrice * this.refundForm.count;
      // 先显示选择退款原因
      this.dialogVisible = true;
    },
    //确认收货功能
    receipt(id) {
      request.put("/order/receipt/" + id).then(res => {
        if (res.code === '0') {
          this.$message({
            type: "warning",
            message: "确认收货成功",
          })
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          })
        }
      });
      this.loadData();
    },

    // 搜索功能
    goSearch: function () {
      this.loadData();
    },

    changeState(value) {
      this.currentState = value;
      this.loadData();
    },
    // 加载表格数据,Get 请求，Get 请求不能直接传对象，只有 Post 可以直接传对象进去
    loadData() {
      this.loading = true;
      request.get("/order/user_order", {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search: this.search,
          state: this.currentState,
        }
      }).then(res => {
        this.tableData = res.data.records;
        this.totalNumber = res.data.total;
        this.loading = false;
      })
    },
    // 删除数据
    deleteClick(id) {
      request.delete('/order/' + id).then(res => {
        if (res.code === '0') {
          this.$message({
            type: "warning",
            message: "删除成功",
          })
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          })
        }
      });
      // 更新数据
      this.loadData();
    },
    // 表单每页大小的改变，因为有了双向绑定，直接更新一下数据就好了
    handleSizeChange() {
      this.loadData();
    },
    // 改变当前页码
    handleCurrentChange: function () {
      this.loadData();
    }
  },
}
</script>

<style scoped>

</style>
